<template>
  <div class="">
    <!-- 工具栏 -->
    <br>
    <br>
    <div ref="toolbar" class="toolbar"></div>
    <!-- 编辑器内容区域 -->
    <div ref="editor" class="texts"></div>
    <!-- 提交按钮 -->
    <el-button size="medium" @click="handleSubmit" type="primary">提交</el-button>
  </div>
</template>

<script>
import E from 'wangeditor'
import { client } from '@/utils/ossClient' // 引入阿里云 OSS 客户端

export default {
  name: 'WangEditorWithOSS',
  data() {
    return {
      editor: null, // 编辑器实例
      info_: null // 当前编辑器内容
    }
  },
  mounted() {
    this.seteditor() // 初始化编辑器
    this.editor.txt.html(this.value) // 设置初始值
  },
  methods: {
    seteditor() {
      // 创建编辑器实例
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)

      // 自定义图片上传逻辑
      this.editor.config.customUploadImg = async (files, insertImgFn) => {
        try {
          for (const file of files) {
            const result = await this.uploadToOSS(file) // 调用阿里云 OSS 上传方法7

            
            insertImgFn(`${result.url}`) // 插入图片并设置样式
          }
        } catch (error) {
          console.error('图片上传失败:', error)
          this.$message.error('图片上传失败，请稍后重试！') // 提示用户
        }
      }

      // 配置工具栏菜单
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'image', // 插入图片
        'table', // 表格
        'undo', // 撤销
        'redo', // 重做
        'fullscreen' // 全屏
      ]

      // 监听内容变化
      this.editor.config.onchange = (html) => {
        this.info_ = html // 更新当前编辑器内容
        this.$emit('changeInfo', this.info_) // 将内容同步到父组件
      }

      // 创建编辑器
      this.editor.create()
    },

    // 上传文件到阿里云 OSS
    async uploadToOSS(file) {
      try {
        const fileName = `${Date.now()}-${file.name}` // 生成唯一的文件名
        const result = await client.put(fileName, file) // 调用 OSS 的 put 方法上传文件
        return {
          url: result.url // 返回文件的访问 URL
        }
      } catch (error) {
        console.error('上传到 OSS 失败:', error)
        throw new Error('上传失败') // 抛出错误以便上层捕获
      }
    },

    // 提交编辑器内容
    handleSubmit() {
      if (!this.info_) {
        this.$message.warning('内容为空，请填写内容后再提交！')
        return
      }
      this.$emit('submit', this.info_) // 触发提交事件，传递内容
      this.$message.success('提交成功！')
      console.log(this.info_)
    }
  }
}
</script>

<style scoped>
/* 工具栏样式 */
.toolbar {
  border: 1px solid #ccc;
}

/* 编辑器内容区域样式 */
.texts {
  border: 1px solid #ccc;
  min-height: 150px;
  max-width: 100%; /* 确保编辑器内容区域不会超出父容器 */
}
</style>